<template>
    <div class="chart-container">
        <!-- 饼图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({ name: 'CheckPieChart', components: {} })
export default class CheckPieChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }
    mounted() {
        this.initChart();
        window.addEventListener('resize', this.screenAdapter);
    }

    get series() {
        return [
            {
                type: 'pie',
                radius: ['60%', '70%'],
                top: '-10%',
                label: {
                    normal: {
                        position: 'center',
                    },
                },
                hoverAnimation: false,
                data: [
                    {
                        value: this.data.finished,
                        name: '已完成',
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#F5474A', // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.5,
                                            color: '#FDDC53', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#56B85F', // 100% 处的颜色
                                        },
                                    ],
                                    globalCoord: false, // 缺省为 false
                                },
                            },
                        },
                        label: {
                            normal: {
                                formatter: '{d}%',
                                textStyle: {
                                    color: '#000',
                                    fontSize: 28,
                                    fontWeight: 'bold',
                                },
                            },
                        },
                    },
                    {
                        value: this.data.unfinished,
                        name: '未完成',
                        label: { show: false },
                    },
                ],
            },
        ];
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            color: ['#EBF4F7'],
            tooltip: {
                show: false,
            },
            series: this.series,
        };
        this.chartInstance.setOption(initOption);
    }

    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
    }

    updateChart(e) {
        const dataOption = {
            series: this.series,
        };
        this.chartInstance.setOption(dataOption);
    }
}
</script>
<style lang="scss" scoped>
.chart-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
